﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="graphics.js"></script>
</head>
<body>
    <div id="svg_container" style="border: 1px solid black; width: 3000px; height: 3000px;">
    </div>
</body>
</html>
<script>
    var graphics = new XGraphics();
    var svg = graphics.createSvg();
    document.getElementById("svg_container").appendChild(svg);

    var rect = graphics.createRectangle().setPos(300, 300).setSize(80, 80);
    svg.appendChild(rect._domEl);

    var line = graphics.createLine().setPoints([{ x: 50, y: 50 }, { x: 100, y: 50 }, { x: 100, y: 100 }, { x: 150, y: 100 }, { x: 150, y: 150 }, { x: 200, y: 150 }]);
    svg.appendChild(line._domEl);

    var image = graphics.createImage().setPos(100, 200).setSize(48, 48).setUrl("null.png");
    svg.appendChild(image._domEl);

    var text = graphics.createText().setPos(100 + 11, 248 + 11).setText("Empty");
    svg.appendChild(text._domEl);

    var diamond = graphics.createDiamond().setPos(500, 100).setSize(100, 100);
    svg.appendChild(diamond._domEl);

    var circle = graphics.createCircle().setPos(500, 300).setSize(50);
    svg.appendChild(circle._domEl);
</script>
